import { defineComponent, computed, ref, onMounted, watch } from 'vue';
import Toolbar from '@wf/components/bpmnjs/components/Toolbar';
import Palette from '@wf/components/bpmnjs/components/Palette';
import Designer from '@wf/components/bpmnjs/components/Designer';
import Panel from '@wf/components/bpmnjs/components/Panel';
// import Setting from '@wf/components/bpmnjs/components/Setting'
import ContextMenu from '@wf/components/bpmnjs/components/ContextMenu/index.vue';
import { EditorSettings } from '@wf/components/bpmnjs/types/editor/settings';
import { defaultSettings } from '@wf/components/bpmnjs/config';

import hljs from 'highlight.js/lib/core';
import xml from 'highlight.js/lib/languages/xml';
import json from 'highlight.js/lib/languages/json';
import { NConfigProvider, NDialogProvider, NMessageProvider } from 'naive-ui';
import { saveBpmnjs, getBpmnjs } from '@wf/api/wf/definition';
import { Base64 } from 'js-base64';
import { ElMessage } from 'element-plus';

hljs.registerLanguage('xml', xml);
hljs.registerLanguage('json', json);

export default defineComponent({
  props: {
    id: {
      type: String,
      default: undefined
    }
  },
  emits: ['saved'],
  setup(props, { emit }) {
    const editorSettings = ref<EditorSettings>({ ...defaultSettings });

    const processXml = ref<string | undefined>(undefined);
    const processConfig = ref<Record<string, string>>({});

    const customPalette = computed<boolean>(() => editorSettings.value.paletteMode === 'custom');
    const customPenal = computed<boolean>(() => editorSettings.value.penalMode === 'custom');
    const showToolbar = computed<boolean>(() => editorSettings.value.toolbar);

    const computedClasses = computed<string>(() => {
      const baseClass = ['designer-container'];
      customPalette.value && baseClass.push('designer-with-palette');
      customPenal.value && baseClass.push('designer-with-penal');
      editorSettings.value.bg === 'grid-image' && baseClass.push('designer-with-bg');
      editorSettings.value.bg === 'image' && baseClass.push('designer-with-image');

      return baseClass.join(' ');
    });

    onMounted(() => {
      document.body.addEventListener('contextmenu', function (ev) {
        ev.preventDefault();
      });
      getFlowXml();
    });

    const getFlowXml = () => {
      const params = {
        modelId: props.id
      }
      getBpmnjs(params).then((res: any) => {
        const { model, wfCode, name } = res;
        processXml.value = Base64.decode(model);
        processConfig.value = {
          processId: wfCode,
          processName: name
        };
      });
    };

    const handleFlowSave = (xml: string) => {
      const data = Base64.encode(xml);
      saveBpmnjs(props.id, data).then(() => {
        ElMessage.success('保存成功！');
        emit('saved');
      });
    };

    /* 组件渲染 */
    return () => (
      <NConfigProvider abstract componentOptions={{ DynamicInput: { buttonSize: 'small' } }} hljs={hljs}>
        <NDialogProvider>
          <div class={computedClasses.value} id="designer-container">
            <NMessageProvider>
              {showToolbar.value && <Toolbar onSaveFlow={handleFlowSave}></Toolbar>}
              <div class="main-content">
                {customPalette.value && <Palette></Palette>}
                <Designer v-model={[processXml.value, 'xml']} config={processConfig.value}></Designer>
                <Panel></Panel>
              </div>
              {/* <Setting v-model={[editorSettings.value, 'settings']}></Setting> */}
              <ContextMenu></ContextMenu>
            </NMessageProvider>
          </div>
        </NDialogProvider>
      </NConfigProvider>
    );
  }
});

// export default App
